<template>
  <card :title="title">
    <template v-slot:content>
      <div class="content">
        <div class="dept" v-for="(item,index1) in applyList" :key="item.uniqueId" >
          <div class="dept_title">{{ item.dept }}</div>
          <div class="dept_apply" >
            <div
              :class="['apply', `apply${apply.id}`, { 'selected': apply.selected }]"
              v-for="(apply,index2) in item.apply"
              :key="index2"
              @click="handleSelect(apply)"
              v-hasPermi="apply.permi"
            >
              <svg-icon class="svg_icon" :icon-class="apply.svgName" />
              <div class="apply_name">{{ apply.applyName }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </card>
</template>

<script>
import card from "@/views/homePage/components/card";
import adminEntry from "@/views/workflow/apply/components/adminEntry.vue";
export default {
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      selectApply: {},
      defaultApply: {},
      applyList: [
        {
          id: 1,
          dept: "采购部OA流程",
          apply: [
            {
              id: 11,
              svgName: "caigou",
              applyName: "采购申请",
              component: "purchaseApply",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 12,
              svgName: "bijia",
              applyName: "比价申请",
              component: "purchaseParity",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 13,
              svgName: "hetong",
              applyName: "合同申请",
              component: "purchaseContact",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 14,
              svgName: "gaizhang",
              applyName: "盖章申请",
              component: "purchaseStamp",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 15,
              svgName: "fukuan",
              applyName: "付款申请",
              component: "purchasePayment",
              permi: ['system:oss:upload'],
              selected:false,
            }
          ]
        },
        {
          id: 2,
          dept: "人力资源部OA流程",
          // permi: ['oa:employeeInfo:add'],
          apply: [
            {
              id: 21,
              svgName: "renshi",
              applyName: "招聘",
              component: "humanRecruit",
              permi: ['oa:employeeInfo:add'],
              selected:false,
            },
            {
              id: 22,
              svgName: "renshi",
              applyName: "录用",
              component: "humanEntry",
              permi: ['oa:employeeInfo:add'],
              selected:false,
            },
            {
              id: 23,
              svgName: "renshi",
              applyName: "转正",
              component: "humanProbation",
              permi: ['oa:employeeInfo:add'],
              selected:false,
            },
            {
              id: 24,
              svgName: "renshi",
              applyName: "岗位调转",
              component: "humanTransfer",
              permi: ['oa:employeeInfo:add'],
              selected:false,
            },
            {
              id: 25,
              svgName: "tiaoxing",
              applyName: "调薪",
              component:  "humanSalary",
              permi: ['oa:employeeInfo:add'],
              selected:false,
            },
            {
              id: 26,
              svgName: "renshi",
              applyName: "离职",
              component: "humanDepart",
              permi: ['system:oss:upload'],
              selected:false,
            },
            // {
            //   id: 27,
            //   svgName: "renshi",
            //   applyName: "考勤异常",
            //   component: "humanReplace",
            //   permi: ['system:oss:upload'],
            //   selected:false,
            // },
            {
              id: 28,
              svgName: "qingjia",
              applyName: "请假",
              component: "humanLeave",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 29,
              svgName: "chuchaif",
              applyName: "出差",
              component: "financeTripApply",
              permi: ['system:oss:upload'],
              selected:false,
            }
          ]
        },
        {
          id: 3,
          dept: "行政部OA流程",
          apply: [
            {
              id: 31,
              svgName: "caiwu",
              applyName: "资产入库",
              component: "adminEntry",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 31,
              svgName: "caiwu",
              applyName: "资产领用",
              component: "adminUse",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 33,
              svgName: "xingzheng",
              applyName: "合同审批",
              permi: ['system:oss:upload'],
              component: "administrateContact",
              selected:false,
            },
            {
              id: 34,
              svgName: "xingzheng",
              applyName: "合同用印",
              permi: ['system:oss:upload'],
              component: "adminStamp",
              selected:false,
            },
            {
              id: 35,
              svgName: "gongshang",
              applyName: "工商变更",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 36,
              svgName: "ziliao",
              applyName: "资料借阅",
              component: "adminBorrow",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 37,
              svgName: "yongche",
              applyName: "公车使用",
              component: "adminCar",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 37,
              svgName: "yongche",
              applyName: "私车公用",
              component: "adminBus",
              permi: ['system:oss:upload'],
              selected:false,
            }
          ]
        },
        {
          id: 4,
          dept: "财务部OA流程",
          apply: [
            {
              id: 42,
              svgName: "zhaodai",
              applyName: "招待申请",
              component: "financeEntertain",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 43,
              svgName: "yusuan",
              applyName: "备用金申请",
              component: "financeImprest",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 44,
              svgName: "yusuan",
              applyName: "报销申请",
              component: "financeSubmit",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 45,
              svgName: "chuchai",
              applyName: "差旅费申请",
              component: "financeTravel",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 46,
              svgName: "yusuan",
              applyName: "预算申请",
              component: "financeBudget",
              permi: ['system:oss:upload'],
              selected:false,
            },
            {
              id: 47,
              svgName: "fukuanl",
              applyName: "财务付款",
              component: "financePayment",
              permi: ['system:oss:upload'],
              selected:false,
            }
          ]
        }
      ]
    };
  },
  components: {
    card
  },
  mounted() {
    let applys = [];
    //所有申请数组
    this.applyList.forEach(item => {
      applys = applys.concat(item.apply);
    });
    console.log(this.$route.query.apply)
    // 默认选择的申请，调转或第一个
    if (this.$route.query.apply){
      this.defaultApply = this.$route.query.apply.title
        ? applys.filter(item => {
          return this.$route.query.apply.title == item.applyName;
        })[0]
        : this.applyList[0].apply[0];
    }else{
      this.defaultApply=this.applyList[0].apply[0];
    }
    //设置组件
    this.$emit("setComponent", this.defaultApply);
    //设置选中申请的css样式
    console.log( this.defaultApply)
    this.defaultApply.selected=true;
  },
  methods: {
    handleSelect(apply) {
      let applys = [];
      this.applyList.forEach(item => {
        applys = applys.concat(item.apply);
      });
      applys.forEach(item => {
        item.selected = false; // 将所有apply的selected字段设置为false
      });

      apply.selected = true; // 将当前点击的apply的selected字段设置为true

      this.selectApply = apply;
      this.$emit("setComponent", apply);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  .dept {
    // padding: 0.125rem;
    .dept_title {
      font-size: 0.2rem;
      font-weight: 600;
    }
    .dept_apply {
      padding: 0.2rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .apply {
        cursor: pointer;
        padding: 0.125rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        margin: 0.085rem 0.125rem;
        .svg_icon {
          font-size: 0.4rem;
        }
        .apply_name {
          font-weight: 600;
          margin-top: 0.125rem;
        }
        &:hover {
          background-color: #e5f2fe;
          // color: #ffffff;
          border-radius: 0.125rem;
        }
      }
      .selected {
        background-color: #e5f2fe;
        // color: #ffffff;
        border-radius: 0.125rem;
      }
    }
  }
}
</style>
